<template>
  <!-- vpn自动打网 -->
  <div class="VPN-auto">
    <a-card class="card card1" title="工单查询">
      <div class="input-box">
        <div class="item">
          <div class="text">流程名称</div>
          <a-input
            class="input"
            placeholder="请选择"
            v-model:value="queryFormData.processName"
          >
          </a-input>
        </div>
        <div class="item">
          <div class="text">流程分类</div>
          <a-select
            class="input"
            placeholder="请选择"
            v-model:value="queryFormData.processCategory"
          >
            <a-select-option
              v-for="item in processClassificationSelectList"
              :key="item.categoryId"
              :value="item.categoryName"
              >{{ item.categoryName }}</a-select-option
            >
          </a-select>
        </div>
        <div class="item item-time">
          <div class="text">提交时间</div>
          <a-range-picker
            class="input picker"
            show-time
            format="YYYY-MM-DD HH:mm:ss"
            v-model:value="queryFormData.submissionTime"
            @change="changeSubmissionTime"
          />
        </div>
        <div class="item button-box">
          <a-button class="button" @click="clickReset">重置</a-button>
          <a-button type="primary" @click="clickQuery">查询</a-button>
        </div>
      </div>
    </a-card>
    <a-card class="card card2" title="工单列表">
      <template #extra>
        <a-button type="primary" @click="clickExport">导出</a-button>
      </template>
      <a-spin :spinning="tableLoading">
        <a-table
          class="table"
          :columns="columns"
          :data-source="tableData.records"
          :pagination="false"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex === 'status'">
              <a-tag color="orange" v-show="record.status === '进行中'">{{
                record.status
              }}</a-tag>
              <a-tag color="green" v-show="record.status === '已完成'">{{
                record.status
              }}</a-tag>
            </template>
            <template v-if="column.dataIndex === 'operation'">
              <div class="operation">
                <span @click="clickCommand(record)">下发命令</span>
                <span @click="clickDetails(record)">详情</span>
              </div>
            </template>
          </template>
        </a-table>
        <a-pagination
          v-model:current="queryFormData.pageNum"
          v-model:pageSize="queryFormData.pageSize"
          :total="tableData.total"
          show-less-items
          :show-total="total => `共 ${total} 条数据`"
          @change="changePagination"
        />
      </a-spin>
    </a-card>
    <Command
      :open="CommandOpen"
      :info="infoCommand"
      @cancel="commandCancel"
    ></Command>
  </div>
</template>
<script setup lang="ts">
  // 引入组件
  import Command from './VPNAuto-children/Command.vue'
  // 引入方法
  import { defineProps, defineEmits, watch, onMounted, ref } from 'vue'
  import { useRouter } from 'vue-router'
  import { message } from 'ant-design-vue'
  import api from '@/axios/api.js'
  import dayjs from 'dayjs'
  import commonMethod from '@/common-method/common-method.js'

  const props = defineProps({})
  const emits = defineEmits([])
  // 自定义状态
  const queryFormData = ref({
    processName: undefined,
    processCategory: undefined,
    submitTimeStart: undefined,
    submitTimeEnd: undefined,
    submissionTime: undefined,
    pageNum: 1,
    pageSize: 10,
  })
  const CommandOpen = ref(false) //下发命令弹窗状态
  const infoCommand = ref({
    procInstId: undefined,
  }) //下发命令info
  const router = useRouter()
  const columns = [
    { title: '流程名称', dataIndex: 'processName' },
    { title: '流程分类', dataIndex: 'categoryName' },
    { title: '当前节点', dataIndex: 'procPointName', width: '20%' },
    { title: '提交时间', dataIndex: 'startTime' },
    { title: '流程状态', dataIndex: 'status' },
    { title: '耗时', dataIndex: 'costTime' },
    { title: '操作', dataIndex: 'operation' },
  ] //列表配置
  const processClassificationSelectList = ref([]) //流程分类下拉列表
  const tableData = ref({
    records: undefined,
    total: undefined,
  }) //列表数据
  const tableLoading = ref(false)
  onMounted(() => {
    getOrderList(queryFormData.value)
    getProcessClassificationSelectList()
  })
  // 自定义方法
  //工单导出
  const orderExport = async data => {
    const res = await api.orderExport(data)
    console.log('工单导出', res)
    if (res.status === 200) {
      commonMethod.derive(res)
    } else {
      message.error(res.data.msg)
    }
  }
  //获取流程分类下拉列表
  const getProcessClassificationSelectList = async () => {
    const res = await api.getProcessClassificationSelectList()
    console.log('获取流程分类下拉列表', res)
    if (res.status === 200) {
      processClassificationSelectList.value = res.data.data
    } else {
      message.error(res.data.msg)
    }
  }
  //获取订单列表
  const getOrderList = async data => {
    tableLoading.value = true
    const res = await api.getOrderList(data)
    console.log('获取工单列表', res)
    if (res.data.code === 200) {
      tableData.value = res.data.data
      tableLoading.value = false
    } else {
      message.error(res.data.msg)
      tableLoading.value = false
    }
  }
  //点击详情
  const clickDetails = record => {
    console.log('点击详情', record)
    router.push({
      path: '/process-details',
      query: { id: record.procInstId },
    })
  }
  //点击下发命令
  const clickCommand = data => {
    console.log('点击下发命令', data)
    infoCommand.value.procInstId = data.procInstId
    CommandOpen.value = true
  }
  //关闭下发命令弹窗
  const commandCancel = () => {
    CommandOpen.value = false
  }
  //提交时间改变
  const changeSubmissionTime = (dates, dateStrings) => {
    console.log('提交时间改变', dates, dateStrings)
    queryFormData.value.submitTimeStart = dateStrings[0]
    queryFormData.value.submitTimeEnd = dateStrings[1]
  }
  //分页改变
  const changePagination = () => {
    getOrderList(queryFormData.value)
  }
  //点击重置
  const clickReset = () => {
    queryFormData.value = {
      ...queryFormData.value,
      processName: undefined,
      processCategory: undefined,
      submitTimeStart: undefined,
      submitTimeEnd: undefined,
      submissionTime: undefined,
      pageNum: 1,
    }
    getOrderList(queryFormData.value)
  }
  //点击查询
  const clickQuery = () => {
    getOrderList(queryFormData.value)
  }
  //点击工单导出
  const clickExport = () => {
    orderExport(queryFormData.value)
  }
</script>
<style lang="less" scoped>
  .VPN-auto {
    .card1 {
      margin-bottom: (20 / @vh);
      .input-box {
        display: flex;
        justify-content: space-between;
        .item {
          display: flex;
          align-items: center;
          width: 20%;
          .text {
            margin-right: (10 / @vw);
            width: (100 / @vw);
            text-align: right;
          }
          .input {
            flex: 1;
          }
          .button {
            margin-right: (10 / @vw);
          }
        }
        .item-time {
          width: 36%;
        }
        .button-box {
          display: flex;
          justify-content: end;
        }
      }
    }
    .card2 {
      .table {
        margin-bottom: (20 / @vh);
        .operation {
          span {
            margin-right: (10 / @vw);
            color: @tc;
            cursor: pointer;
            &:last-child {
              margin-right: 0;
            }
          }
        }
      }
    }
  }
</style>
